<template>
  <div>
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header style="text-align: left; font-size: 12px">

        <span style="font-size: 18px">维数公寓-通用权限管理</span>
        <el-dropdown>
          <span style="margin-left: 1500px">
            <el-avatar size="medium"
                       :src="this.$baseUrl+'/img/'+ this.$store.getters.getUserInfo.headImg"
                       style="margin-top: 10px"></el-avatar>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人资料</el-dropdown-item>
            <el-dropdown-item><span @click="exit">退出登录</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--        <span>{{ this.$store.state.userInfo.name }}</span>-->
        <!--        <span>{{ this.$store.getters.getUserInfo.name }}</span>-->

      </el-header>


      <el-container>
        <el-aside :width="asideWith" style="background-color: rgb(238, 241, 246)">
          <el-button :icon="asideCron" circle @click="closeOrOpen"></el-button>
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :collapse="isCollapse" router>
            <el-submenu :index="'index'+ menu.id" v-for="menu in menus" :key="menu.id">
              <template slot="title">
                <i :class="menu.iconCls"></i>
                <span slot="title">{{ menu.name }}</span>
              </template>
              <el-menu-item-group v-for="subMenu in menu.children" :key="subMenu.id">

                <el-menu-item :index="subMenu.path">
                  <i :class="subMenu.iconCls"></i>
                  {{ subMenu.name }}
                </el-menu-item>
              </el-menu-item-group>

            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Index",
  data() {
    return {
      isCollapse: false,
      asideWith: '200px',
      asideCron: 'el-icon-d-arrow-left',
      menus: []
    };
  },
  methods: {
    closeOrOpen() {
      this.isCollapse = !this.isCollapse
      this.asideWith = this.isCollapse ? '70px' : '200px'
      this.asideCron = this.isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'
    },
    getTree() {
      axios.get(this.$baseUrl+'/menu/getTree').then(res => {
        this.menus = res.data.data;
      })
    },
    exit() {
      // 移除token
      window.localStorage.removeItem("token");
      window.localStorage.removeItem("userInfo");
      this.$router.push('login')
    }
  },
  created() {
    this.getTree();
  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>